<template>
  <Category />
  <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ marginTop: '30px' }">
    <!-- card body -->
    <SpuList v-if="showState === 0" @setState="setState" />
    <SpuForm v-if="showState === 1" @setState="setState" :spuInfo="spuInfo"/>
    <SkuForm v-if="showState === 2" />
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue"
import SpuList from "./components/SpuList/index.vue";
import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import type { SpuInfoType } from "@/api/spu"
import useAttrListStore from "@/stores/attr"
import { storeToRefs } from "pinia"

const attrStore = useAttrListStore()
const { category3Id } = storeToRefs(attrStore)

//切换视图
const showState = ref(0);
//保存完整的spuInfo数据,如果是新增,则把初始值传递给SpuForm组件
//如果是修改,则替换初始值,然后传递给SpuForm组件
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value as number,
  description: "",
  spuName: "",
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
})

//封装自定义回调函数,接收子组件传参,控制组件的显示与隐藏
const setState = (state: number, row?: SpuInfoType) => {
  showState.value = state

  //如果row存在说明是修改,否则就是新增
  if (row) {
    spuInfo.value = row
  } else {
    spuInfo.value = {
      category3Id: category3Id.value as number,
      description: "",
      spuName: "",
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: [],
    }
  }
}
</script>
